<template>
  <div>
    <h1>最受欢迎的编程语言投票</h1>
    <p>还等什么，赶紧为你的编程语言来投上宝贵的一票吧</p>
    <h2>总投票数：{{ total }}</h2>
    <div>
      <button @click="addcount('java')">为java投票</button>（{{ $store.state.conut.java }}）
      <button @click="addcount('python')">为python投票</button>（{{ $store.state.conut.python }}）,
      <button @click="addcount('php')">为php投票</button>（{{ $store.state.conut.php }}）
      <div>
        
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["total"]),
    ...mapState(["conut", "count"]),
  },
  methods: {
    ...mapMutations(["addcount"]),
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>